<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/landCenter/driverManagement">司机管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>添加司机</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div style="margin: 24px;">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-card class="card-nd">
          <div class="card-title">
            选择司机类型
            <a-radio-group
              name="isSelfOperation"
              v-model="form.isSelfOperation"
              @change="() => {this.custIdList = []; this.form.custId=''}"
              style="marginLeft: 30px;"
            >
              <a-radio :value="1">自营</a-radio>
              <a-radio :value="0">外派</a-radio>
            </a-radio-group>
          </div>
        </a-card>
        <a-card>
          <div class="card-title hasContent">司机信息</div>
          <a-row :gutter="[0]">
            <a-col :span="12">
              <a-form-model-item label="所属车队" prop="custId">
                <a-select
                  show-search
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  v-model="form.custId"
                  @search="handleNameChange"
                  @select="emptyChange"
                >
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option v-for="d in custIdList" :key="d.id">{{ d.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="name" label="司机姓名">
                <a-input v-model="form.name" :max-length="10" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="phone" label="司机手机号码">
                <a-input v-model="form.phone" :max-length="11" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="password" label="初始密码">
                <a-input v-model="form.password" :max-length="16" placeholder="默认密码：jiahua123" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="driverLicense" label="驾驶证档案编号">
                <a-input v-model="form.driverLicense" :max-length="12" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="identityCard" label="身份证号码">
                <a-input v-model="form.identityCard" :max-length="18" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>

        <a-card>
          <div class="card-title" style="margin-bottom:10px;">司机证件</div>
          <a-row>
            <a-col :span="24" style="margin-bottom:0;">
              <a-form-model-item prop="identityCardPic1" style="float: left; margin-bottom:0;">
                <upload-identity-card
                  identityCardField="identityCardPic1"
                  identityCardText="上传身份证正面照"
                  @success="fileSuccess"
                />
              </a-form-model-item>
              <a-form-model-item prop="identityCardPic2" style="float: left; margin-bottom:0;">
                <upload-identity-card
                  identityCardField="identityCardPic2"
                  identityCardText="上传身份证反面照"
                  @success="fileSuccess"
                />
              </a-form-model-item>
              <a-form-model-item prop="driverLicensePics" style="float: left; margin-bottom:0;">
                <upload-identity-card
                  identityCardField="driverLicense"
                  identityCardText="上传驾驶证"
                  @success="fileSuccess"
                />
              </a-form-model-item>
              <a-form-model-item
                prop="qualificationCertificatePics"
                style="float: left; margin-bottom:0;"
              >
                <upload-identity-card
                  identityCardField="qualificationCertificate"
                  identityCardText="上传从业资格证"
                  @success="fileSuccess"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </div>
    <div class="creat_button">
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-button
          type="primary"
          @click="save"
          :saveLoading="saveLoading"
          style="margin-left: 20px; float: right; margin-top:12px;"
        >提交</a-button>
        <a-button @click="cancelCreate" style="float: right; margin-top:12px;">取消</a-button>
      </a-form-model-item>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import {queryCustNameList} from '@/api'
import md5 from 'md5'
import UploadIdentityCard from '@/components/UploadIdentityCard'
import { addTruckDriver } from '@/api/landCenter'
const fomrMessage = `必填项不能为空`

export default {
  data () {
    this.handleNameChange = debounce(this.handleNameChange, 800)
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      custIdList: [],
      form: {
        isSelfOperation: 1,
        custId: '',
        name: '',
        phone: '',
        password: null,
        driverLicense: '',
        identityCard: '',
        identityCardPics: '',
        driverLicensePics: '',
        qualificationCertificatePics: '',
        identityCardPic1: '',
        identityCardPic2: ''
      },
      rules: {
        custId: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        name: [{required: true, message: fomrMessage, trigger: 'blur'}],
        phone: [{required: true, message: fomrMessage, trigger: 'blur'}, {message: '手机号码格式不正确', pattern: /^1[3456789]\d{9}$/, trigger: 'blur'}],
        driverLicense: [{required: true, message: fomrMessage, trigger: 'blur'}],
        identityCard: [{required: true, message: fomrMessage, trigger: 'blur'}],
        identityCardPic1: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        identityCardPic2: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        driverLicensePics: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        qualificationCertificatePics: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}]
      },
      saveLoading: false
    }
  },
  components: {
    [UploadIdentityCard.name]: UploadIdentityCard
  },
  methods: {
    handleNameChange (nameLike = '') { // 车队
      queryCustNameList({
        nameLike,
        belongCompany: 'JIA_TE',
        custTypeLike: this.form.isSelfOperation === 1 ? 'SELF_TEAM' : (this.form.isSelfOperation === 0 ? 'EXPATRIATE_TEAM' : 'TEAM'),
        status: 1
      }).then(rsp => {
        this.custIdList = rsp.data
      })
    },
    emptyChange (e) {
      this.handleNameChange()
    },
    fileSuccess (key, url) {
      if (key === 'identityCardPic1') {
        this.form.identityCardPic1 = url
      } else if (key === 'identityCardPic2') {
        this.form.identityCardPic2 = url
      } else if (key === 'driverLicense') {
        this.form.driverLicensePics = url
      } else if (key === 'qualificationCertificate') {
        this.form.qualificationCertificatePics = url
      }
    },
    cancelCreate () {
      let _t = this
      this.$confirm({
        title: '还有未保存的信息，退出后编辑的数据将消失，确定退出？',
        onOk () {
          _t.$router.push({name: 'landCenter/driverManagement'})
        }
      })
    },
    save () {
      this.saveLoading = true
      // console.log(this.form.identityCardPic1)
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          // 密码
          this.form.password = md5(this.form.password ? this.form.password : 'jiahua123')
          // 身份证正反
          this.form.identityCardPics = this.form.identityCardPic1 + ',' + this.form.identityCardPic2

          addTruckDriver(this.form).then(rsp => {
            this.$message.success('提交成功！')
            this.saveLoading = false
            this.$router.push({name: 'landCenter/driverManagement'})
          }).catch(rs => { this.saveLoading = false })
        }
      })
    }
  },
  mounted () {
    this.handleNameChange()
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 24px;
  border: none;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
  .ant-col-12 {
    padding-right: 50px;
  }
}
#the_module,
.ant-layout {
  margin-bottom: 55px;
}
</style>
